<template>
  <div class="home_map_componentMap">
    <div class="wrapper-title">
      <BaseTitle title="Map组件" />
    </div>

    <div class="wrapper-content">

      <!-- Map 组件 -->
      <div>
        <h2>Map 组件</h2>
        <h3><span class="Default a_hover" @click="initMapClick">初始化地图</span>部分代码提供是为了提供给开发者更灵活的方式创建地图，更加推荐开发者使用</h3>
        <h3>同样，我也为开发者提供了已经写好的 Map 组件</h3>
        <h3>
          <div class="exampleMap">
            <Map @mapOnLoad="mapOnLoad" />
          </div>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>Map
                <!-- <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span> -->
                <span class="code-orange">@mapOnLoad</span>=<span class="code-green">"mapOnLoad"</span></span>
              /</span>>
            </div>
            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">}</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methods: {
              </div>

              <div class="code-indent6">
                mapOnLoad (Map) {
              </div>
              <div class="code-indent8">
                <span class="code-orange">console</span>.log(Map)
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>
        </code>
      </div>

      <!-- Props、Emit、Slot、Methods -->
      <div>
        <h2>Props、Emit、Slot、Methods</h2>
        <h3>
          <div class="exampleMap">
            <Map
              ref="map"
              layerActive="terrain"
              chosenClass="chosenClass"
              :isHideBase="true"
              :isNeedScaleLine="true"
              @mapClick="mapClick" />
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="getMap">getMap</Button>
          <Button type="primary" @click="getLayers">getLayers</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent6 code-tag">
              <<span>Map</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">layerActive</span>=<span class="code-green">"terrain"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">chosenClass</span>=<span class="code-green">"chosenClass"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isHideBase</span>=<span class="code-green">"true"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isNeedScaleLine</span>=<span class="code-green">"true"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">@mapClick</span>=<span class="code-green">"mapClick"</span></span><span class="code-tag">></span>
            </div>

            <div class="code-indent8">
              <span class="code-tag"><<span>div</span></span>
              <span class="code-orange">slot</span>=<span class="code-green">"loading"</span><span class="code-tag">></span>
            </div>
            <div class="code-indent10 comment">
              <<span>!-- 这里写你的loading组件 --></span>
            </div>
            <div class="code-indent8 code-tag">
              <<span>/div></span>
            </div>

            <div class="code-indent6 code-tag">
              <<span>/Map></span>
            </div>

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"getMap"</span></span><span class="code-tag">></span>getMap<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"getLayers"</span></span><span class="code-tag">></span>getLayers<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">}</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>
              <div class="code-indent6">
                mapClick (obj) {
              </div>
              <div class="code-indent8">
                <span class="code-orange">console</span>.log(obj)
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                getMap () {
              </div>
              <div class="code-indent8">
                <span class="code-default">const</span>
                Map =
                <span class="code-orange">this</span>.$refs['map'].getMap()
              </div>
              <div class="code-indent8">
                <span class="code-orange">console</span>.log(Map)
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                getLayers () {
              </div>
              <div class="code-indent8">
                <span class="code-default">const</span>
                Layers =
                <span class="code-orange">this</span>.$refs['map'].getLayers()
              </div>
              <div class="code-indent8">
                <span class="code-orange">console</span>.log(Layers)
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- style -->
          <div>
            <div class="code-tag">
              <<span>style></span>
            </div>
            <div class="code-indent2">
              <span class="code-orange">.chosenClass</span>
              {
            </div>
            <div class="code-indent4">
              <span class="code-purple">top</span>:
              <span class="code-purpleRed">20px</span>;
            </div>
            <div class="code-indent4">
              <span class="code-purple">bottom</span>:
              <span class="code-green">auto</span>
              <span class="code-orange">!important</span>;
            </div>
            <div class="code-indent2">
              }
            </div>
            <div class="code-tag">
              </<span>style></span>
            </div>
          </div>
        </code>
      </div>

      <!-- 台风路径、云图、雷达图 图层 -->
      <div>
        <h2>台风路径、云图、雷达图 图层</h2>
        <h3>
          <div class="exampleMap typhoonMap">
            <Map ref="typhoonMap" :isNeedClick="true"/>
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="addTyphoonLayer">添加台风路径</Button>
          <Button type="primary" @click="removeTyphoonLayer">删除台风路径</Button>
        </h3>
        <h3>
          <Button type="primary" @click="addCloudLayer">添加云图</Button>
          <Button type="primary" @click="removeCloudLayer">删除云图</Button>
          <Button type="primary" @click="refreshCloudAnimate">手动重播云图动画</Button>
        </h3>
        <h3>
          <Button type="primary" @click="addRadarLayer">添加雷达图</Button>
          <Button type="primary" @click="removeRadarLayer">删除雷达图</Button>
          <Button type="primary" @click="refreshRadarAnimate">手动重播雷达图动画</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent6 code-tag">
              <<span>Map</span> <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span><span class="code-tag"> /></span>
            </div>

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addTyphoonLayer"</span></span><span class="code-tag">></span>添加台风路径<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeTyphoonLayer"</span></span><span class="code-tag">></span>删除台风路径<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addCloudLayer"</span></span><span class="code-tag">></span>添加云图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeCloudLayer"</span></span><span class="code-tag">></span>删除云图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"refreshCloudAnimate"</span></span><span class="code-tag">></span>手动重播云图动画<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addRadarLayer"</span></span><span class="code-tag">></span>添加雷达图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeRadarLayer"</span></span><span class="code-tag">></span>删除雷达图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"refreshRadarAnimate"</span></span><span class="code-tag">></span>手动重播雷达图动画<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">},</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>

              <div class="code-indent6">
                addTyphoonLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({
              </div>
              <div class="code-indent10">
                layerName: 'typhoonLayer',
              </div>
              <div class="code-indent10">
                layerOptions: {
              </div>
              <div class="code-indent12">
                typhoonTitleClass: 'typhoonTitleClass',
                <span class="comment">
                  // 可通过添加typhoonTitleClass，可改变台风大标题的样式
                </span>
              </div>
              <div class="code-indent12">
                typhoonControlClass: 'typhoonControlClass',
                <span class="comment">
                  // 可通过添加typhoonControlClass，改变台风列表显示开关的样式
                </span>
              </div>
              <div class="code-indent12">
                typhoonInfoClass: 'typhoonInfoClass'
                <span class="comment">
                  // 可通过添加typhoonInfoClass，改变台风列表的样式
                </span>
              </div>
              <div class="code-indent10">
                }
              </div>
              <div class="code-indent8">
                })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addCloudLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({
              </div>
              <div class="code-indent10">
                layerName: 'cloudLayer',
              </div>
              <div class="code-indent10">
                layerOptions: {
              </div>
              <div class="code-indent12">
                cloudRadarClass: 'cloudClass'
                <span class="comment">
                  // 可通过添加cloudRadarClass，可改变显示时间的样式
                </span>
              </div>
              <div class="code-indent10">
                }
              </div>
              <div class="code-indent8">
                })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeCloudLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName: 'cloudLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                refreshCloudAnimate () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].refreshAnimate({ layerName: 'cloudLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addRadarLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({
              </div>
              <div class="code-indent10">
                layerName: 'radarLayer',
              </div>
              <div class="code-indent10">
                layerOptions: {
              </div>
              <div class="code-indent12">
                cloudRadarClass: 'radarClass'
                <span class="comment">
                  // 可通过添加cloudRadarClass，可改变显示时间的样式
                </span>
              </div>
              <div class="code-indent10">
                }
              </div>
              <div class="code-indent8">
                })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeRadarLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName: 'radarLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeRadarLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].refreshAnimate({ layerName: 'radarLayer' })
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- style -->
          <div>
            <div class="code-tag">
              <<span>style></span>
            </div>

            <div class="code-indent2">
              <span class="code-orange">.typhoonTitleClass</span>
              { }
            </div>
            <div class="code-indent2">
              <span class="code-orange">.cloudClass</span>
              {
            </div>
            <div class="code-indent4">
              <span class="code-purple">color</span>:
              <span class="code-green">Green</span>
              <span class="code-orange">!important</span>;
            </div>
            <div class="code-indent2">
              }
            </div>
            <div class="code-indent2">
              <span class="code-orange">.radarClass</span>
              {
            </div>
            <div class="code-indent4">
              <span class="code-purple">color</span>:
              <span class="code-green">Gray</span>
              <span class="code-orange">!important</span>;
            </div>
            <div class="code-indent2">
              }
            </div>
            <div class="code-tag">
              </<span>style></span>
            </div>
          </div>
        </code>
      </div>

      <!-- 其它图层 -->
      <div>
        <h2>其它图层</h2>
        <h3>除了单独列出来的图层外，其余数据一张图图层的添加和删除，我都没有做单独的用法说明了</h3>
        <h3>因为它们的用法都是一致的，唯一不同的地方在于开发者传入的layerName</h3>
        <h3>而所有图层的layerName，都已经列在最底部的表格了，这里我以水闸为例子</h3>
        <h3>
          <div class="exampleMap">
            <Map ref="other-map" />
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="addLayer('gateLayer')">添加水闸图层</Button>
          <Button type="primary" @click="removeLayer('gateLayer')">删除水闸图层</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <!-- <div class="code-indent6 comment">
              <<span>!--</span>
                由于包含了图标图层，需设置isNeedClick和isNeedSizeChange为true，以便展示更多信息
              <span>--</span>>
            </div> -->
            <div class="code-indent6 code-tag">
              <<span>Map</span>
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span><span class="code-tag"> /></span>
            </div>
            <!-- <div class="code-indent8">
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span><span class="code-tag"> /></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isNeedShowModal</span>=<span class="code-green">"true"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isNeedClick</span>=<span class="code-green">"true"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isNeedSizeChange</span>=<span class="code-green">"true"</span></span><span class="code-tag"> /></span>
            </div> -->

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addLayer('gateLayer')"</span></span><span class="code-tag">></span>添加水闸图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeLayer('gateLayer')"</span></span><span class="code-tag">></span>删除水闸图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">},</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>

              <div class="code-indent6">
                addLayer (layerName) {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({ layerName })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeLayer (layerName) {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName })
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

        </code>
      </div>

      <!-- 自定义数据业务图层 -->
      <div>
        <h2>自定义数据业务图层</h2>
        <h3>这里以水闸为例子</h3>
        <h3>有些时候我们需要一个水闸图层以及其弹框信息，但是水闸的api却不是默认设定的路径</h3>
        <h3>或者，我们拥有所有水闸的数据，想根据该数据来生成图层。所以，我为开发者们提供了一些方法</h3>
        <h3>但需注意一点，无论是哪种形式，水闸数据的字段必须和默认设定api源的数据字段吻合，否则会出现加载不出图层或者空数据的状况</h3>
        <h3>大部分的图层都可以使用自定义数据，在页面最下面的 LayerName API 有说明那些是可以使用自定义数据</h3>
        <h3>
          <div class="exampleMap">
            <Map ref="customIcon-map" />
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="addCustomGate">添加自定义水闸图层</Button>
          <Button type="primary" @click="removeCustomGate">删除自定义水闸图层</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent6 code-tag">
              <<span>Map</span>
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span><span class="code-tag"> /></span>
            </div>

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addCustomGate"</span></span><span class="code-tag">></span>添加自定义水闸图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeCustomGate"</span></span><span class="code-tag">></span>删除自定义水闸图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">},</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>

              <div class="code-indent6">
                addCustomGate () {
              </div>

              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({
              </div>

              <div class="code-indent10">
                layerName: 'gateLayer',
              </div>
              <div class="code-indent10">
                layerOptions: {
                <span class="comment">// 当apiUrl和data同时存在时，会直接使用data，不会去请求apiUrl</span>
              </div>
              <div class="code-indent12">
                isCustom: true,
                <span class="comment">// 设置为自定义数据图层，为true时，必须传入apiUrl或者data</span>
              </div>
              <div class="code-indent12">
                apiUrl: '',
                <span class="comment">// 可传入api源路径，需注意，传入api源是不能配置请求参数的</span>
              </div>
              <div class="code-indent12">
                data: [
                <span class="comment">// 可直接传入数据，传入的数据字段必须和默认api源数据字段吻合</span>
              </div>
              <div class="code-indent14">
                { stalong: '113.0277943611145', stalat: '23.152345418930057', sluicegate_name: '细海水闸' }
              </div>
              <div class="code-indent12">
                ]
              </div>
              <div class="code-indent10">
                }
              </div>
              <div class="code-indent8">
                })
              </div>

              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeCustomGate () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName: 'gateLayer' })
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

        </code>
      </div>

      <!-- 绘制工具图层 -->
      <div>
        <h2>绘制工具图层</h2>
        <h3>有时候我们需要在地图上绘制一系列的图形，而绘制图形也是在地图上加入一层Layer</h3>
        <h3>然后在Layer的基础上，再进行绘制图形、修改图形已经删除图形</h3>
        <h3>
          <div class="exampleMap">
            <Map ref="drawUtil-map" />
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="addDrawUtilLayer">添加绘制工具图层</Button>
          <Button type="primary" @click="removeDrawUtilLayer">删除绘制工具图层</Button>
        </h3>
        <h3>
          <Button type="primary" @click="addPointDraw">绘制点(Poing)</Button>
          <Button type="primary" @click="addLineStringDraw">绘制线(LineString)</Button>
          <Button type="primary" @click="addPolygonDraw">绘制多边形(Polygon)</Button>
          <Button type="primary" @click="addCircleDraw">绘制圆形(Circle)</Button>
          <Button type="primary" @click="addSquareDraw">绘制任意矩形(Square)</Button>
          <Button type="primary" @click="addBoxDraw">绘制矩形(Box)</Button>
        </h3>
        <h3>
          <Button type="primary" @click="editDraw">修改绘制图形</Button>
          <Button type="primary" @click="deleteDraw">删除选中图形</Button>
          <Button type="primary" @click="deleteAllDraw">删除所有图形</Button>
          <Button type="primary" @click="removeDrawUtil">清除绘制或修改状态</Button>
          <Button type="primary" @click="getDrawLayerGeoJson">获取整个图形图层的GeoJson</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent6 code-tag">
              <<span>Map</span>
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span><span class="code-tag"> /></span>
            </div>

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addDrawUtilLayer"</span></span><span class="code-tag">></span>添加绘制工具图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeDrawUtilLayer"</span></span><span class="code-tag">></span>删除绘制工具图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addPointDraw"</span></span><span class="code-tag">></span>绘制点(Point)<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addLineStringDraw"</span></span><span class="code-tag">></span>绘制线(LineString)<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addPolygonDraw"</span></span><span class="code-tag">></span>绘制多边形(Polygon)<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addCircleDraw"</span></span><span class="code-tag">></span>绘制圆形(Circle)<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addSquareDraw"</span></span><span class="code-tag">></span>绘制任意矩形(Square)<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addBoxDraw"</span></span><span class="code-tag">></span>绘制矩形(Box)<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"editDraw"</span></span><span class="code-tag">></span>修改绘制图形<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"deleteDraw"</span></span><span class="code-tag">></span>删除选中图形<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"deleteAllDraw"</span></span><span class="code-tag">></span>删除所有图形<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeDrawUtil"</span></span><span class="code-tag">></span>清除绘制或修改状态<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"getDrawLayerGeoJson"</span></span><span class="code-tag">></span>获取整个图形图层的GeoJson<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">},</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>

              <div class="code-indent6">
                addDrawUtilLayer () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 添加绘制工具图层</span>
              </div>

              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({
              </div>

              <div class="code-indent10">
                layerName: 'drawUtilLayer',
              </div>
              <div class="code-indent10">
                layerOptions: {
              </div>
              <div class="code-indent12">
                typeStyle: {
                <span class="comment">// 选传，设置绘制图形颜色，任意矩形和矩形均属于多边形，所以它们的样式设置使用 Polygon 类型</span>
              </div>
              <div class="code-indent14">
                PointRadius: 7,
                <span class="comment">// 类型：点(Point)，半径</span>
              </div>
              <div class="code-indent14">
                PointFillColor: 'black',
                <span class="comment">// 类型：点(Point)，填充颜色</span>
              </div>
              <div class="code-indent14">
                LineStringStrokeColor: 'green',
                <span class="comment">// 类型：线条(LineString)，填充颜色</span>
              </div>
              <div class="code-indent14">
                LineStringStrokeWidth: 10,
                <span class="comment">// 类型：线条(LineString)，线条粗度</span>
              </div>
              <div class="code-indent14">
                PolygonStrokeColor: 'blue',
                <span class="comment">// 类型：多边形(Polygon)，边框线条颜色</span>
              </div>
              <div class="code-indent14">
                PolygonStrokeWidth: 3,
                <span class="comment">// 类型：多边形(Polygon)，边框线条粗度</span>
              </div>
              <div class="code-indent14">
                PolygonStrokeLineDash: [0],
                <span class="comment">// 类型：多边形(Polygon)，边框虚线密度（0为实线）</span>
              </div>
              <div class="code-indent14">
                PolygonFillColor: 'rgba(0, 0, 255, 0.1)',
                <span class="comment">// 类型：多边形(Polygon)，填充颜色</span>
              </div>

              <div class="code-indent14">
                CircleStrokeColor: 'blue',
                <span class="comment">// 类型：圆形(Circle)，边框线条颜色</span>
              </div>
              <div class="code-indent14">
                CircleStrokeWidth: 3,
                <span class="comment">// 类型：圆形(Circle)，边框线条粗度</span>
              </div>
              <div class="code-indent14">
                CircleStrokeLineDash: [0],
                <span class="comment">// 类型：圆形(Circle)，边框虚线密度（0为实线）</span>
              </div>
              <div class="code-indent14">
                CircleFillColor: 'rgba(0, 0, 255, 0.1)'
                <span class="comment">// 类型：圆形(Circle)，填充颜色</span>
              </div>

               <div class="code-indent12">
                },
              </div>

              <div class="code-indent12">
                onDrawStart: (res) => {
              </div>
              <div class="code-indent14">
                <span class="comment">// 当绘制图形开始时触发</span>
              </div>
              <div class="code-indent14">
                <span class="code-orange">console</span>.log(res)
              </div>
              <div class="code-indent12">},</div>

              <div class="code-indent12">
                onDrawEnd: (res) => {
              </div>
              <div class="code-indent14">
                <span class="comment">// 当绘制图形结束时触发</span>
              </div>
              <div class="code-indent14">
                <span class="code-orange">console</span>.log(res)
              </div>
              <div class="code-indent12">},</div>

              <div class="code-indent12">
                onModifySelect: (res) => {
              </div>
              <div class="code-indent14">
                <span class="comment">// 当修改图形选中图形时触发</span>
              </div>
              <div class="code-indent14">
                <span class="code-orange">console</span>.log(res)
              </div>
              <div class="code-indent12">},</div>

              <div class="code-indent12">
                onModifySelectChange: (res) => {
              </div>
              <div class="code-indent14">
                <span class="comment">// 当修改图形选中图形后，图形发生变化时触发</span>
              </div>
              <div class="code-indent14">
                <span class="code-orange">console</span>.log(res)
              </div>
              <div class="code-indent12">}</div>

              <div class="code-indent10">
                }
              </div>
              <div class="code-indent8">
                })
              </div>

              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeDrawUtilLayer () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 删除绘制工具图层</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName: 'drawUtilLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addPointDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 绘制点</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addDraw({ type: 'Point' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addLineStringDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 绘制线</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addDraw({ type: 'LineString' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addPolygonDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 绘制多边形</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addDraw({ type: 'Polygon' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addCircleDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 绘制圆形</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addDraw({ type: 'Circle' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addSquareDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 绘制任意矩形</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addDraw({ type: 'Square' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addBoxDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 绘制矩形</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addDraw({ type: 'Box' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                editDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 修改绘制图形</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].editDraw()
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                deleteDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 删除选中图形</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].deleteDraw()
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                deleteAllDraw () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 删除所有图形</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].deleteAllDraw()
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeDrawUtil () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 清除绘制或修改状态</span>
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeDrawUtil()
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                getDrawLayerGeoJson () {
              </div>
              <div class="code-indent8">
                <span class="comment">// 获取整个图形图层的GeoJson</span>
              </div>
              <div class="code-indent8">
                <span class="code-default">const</span> res =
                <span class="code-orange">this</span>.$refs['map'].getDrawLayerGeoJson()
              </div>
              <div class="code-indent8">
                <span class="code-orange">console</span>.log(res)
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

        </code>
      </div>

      <!-- API -->
      <div>
        <h2>Props API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.propsTbody"></Table>
        </h3>
        <h2>Emit API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="emitThead"
            :data="apis.emitTbody"></Table>
        </h3>
        <h2>Methods API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="methodsThead"
            :data="apis.methodsTbody"></Table>
        </h3>
        <h2>Slot API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="slotThead"
            :data="apis.slotTbody"></Table>
        </h3>
        <h2>LayerName API</h2>
        <h3>
          <div class="search">
            <div class="search-key">图层名字</div>
            <div class="search-input">
              <Input
                v-model="searchLayerName"
                placeholder="搜索图层LayerName" />
            </div>
          </div>
        </h3>
        <h3>
          <Table
            border
            size="small"
            :columns="layerNameThead"
            :data="layerNameTbody"></Table>
        </h3>
      </div>
    </div>

  </div>
</template>

<script>
import { Components } from 'base/Gykj_map'
import { apiThead, emitThead, methodsThead, slotThead } from './api/common'
import * as apis from './api/componentMap'

export default {
  components: {
    Map: Components.initMap
  },
  computed: {
    layerNameTbody () {
      return apis.layerNameTbody.filter(item => item.name.indexOf(this.searchLayerName) > -1)
    }
  },
  created () {
    this.apiThead = apiThead(undefined, { nameWidth: 145 })
    this.methodsThead = methodsThead(undefined, { nameWidth: 155 })
    this.emitThead = emitThead(undefined, { nameWidth: 145 })
    this.slotThead = slotThead()
    this.layerNameThead = apis.layerNameThead(this)
    this.apis = apis
  },
  data () {
    return {
      searchLayerName: ''
    }
  },
  methods: {
    mapOnLoad (Map) {
      console.log(Map)
    },
    getMap () {
      const Map = this.$refs['map'].getMap()
      console.log('getMap点击：', Map)
      alert('getMap点击，详细参数可以见 console ')
    },
    getLayers () {
      const Layers = this.$refs['map'].getLayers()
      console.log('getLayers点击：', Layers)
      alert('getLayers点击，详细参数可以见 console ')
    },
    mapClick (obj) {
      console.log('地图点击：', obj)
      alert('地图点击，详细参数可以见 console ')
    },
    addTyphoonLayer () {
      this.$refs['typhoonMap'].addLayer({
        layerName: 'typhoonLayer',
        layerOptions: {
          typhoonTitleClass: 'typhoonTitleClass',
          typhoonControlClass: 'typhoonControlClass',
          typhoonInfoClass: 'typhoonInfoClass'
        }
      })
    },
    removeTyphoonLayer () {
      this.$refs['typhoonMap'].removeLayer({ layerName: 'typhoonLayer' })
    },
    addCloudLayer () {
      this.$refs['typhoonMap'].addLayer({
        layerName: 'cloudLayer',
        layerOptions: {
          cloudRadarClass: 'cloudClass'
        }
      })
    },
    removeCloudLayer () {
      this.$refs['typhoonMap'].removeLayer({ layerName: 'cloudLayer' })
    },
    refreshCloudAnimate () {
      this.$refs['typhoonMap'].refreshAnimate({ layerName: 'cloudLayer' })
    },
    addRadarLayer () {
      this.$refs['typhoonMap'].addLayer({
        layerName: 'radarLayer',
        layerOptions: {
          cloudRadarClass: 'radarClass'
        }
      })
    },
    removeRadarLayer () {
      this.$refs['typhoonMap'].removeLayer({ layerName: 'radarLayer' })
    },
    refreshRadarAnimate () {
      this.$refs['typhoonMap'].refreshAnimate({ layerName: 'radarLayer' })
    },
    addLayer (layerName) {
      this.$refs['other-map'].addLayer({ layerName })
    },
    removeLayer (layerName) {
      this.$refs['other-map'].removeLayer({ layerName })
    },
    addCustomGate () {
      this.$refs['customIcon-map'].addLayer({
        layerName: 'gateLayer',
        layerOptions: {
          isCustom: true,
          apiUrl: '',
          data: [
            { stalong: '113.0277943611145', stalat: '23.152345418930057', sluicegate_name: '细海水闸' }
          ]
        }
      })
    },
    removeCustomGate () {
      this.$refs['customIcon-map'].removeLayer({ layerName: 'gateLayer' })
    },
    addDrawUtilLayer () {
      this.$refs['drawUtil-map'].addLayer({
        layerName: 'drawUtilLayer',
        layerOptions: {
          onDrawStart: (res) => {
            // 当绘制图形开始时触发
            console.log(res)
          },
          onDrawEnd: (res) => {
            // 当绘制图形结束时触发
            console.log(res)
          },
          onModifySelect: (res) => {
            // 当修改图形选中图形时触发
            console.log(res)
          },
          onModifySelectChange: (res) => {
            // 当修改图形选中图形后，图形发生变化时触发
            console.log(res)
          }
        }
      })
    },
    removeDrawUtilLayer () {
      this.$refs['drawUtil-map'].removeLayer({ layerName: 'drawUtilLayer' })
    },
    addPointDraw (type) {
      this.$refs['drawUtil-map'].addDraw({ type: 'Point' })
    },
    addLineStringDraw (type) {
      this.$refs['drawUtil-map'].addDraw({ type: 'LineString' })
    },
    addPolygonDraw (type) {
      this.$refs['drawUtil-map'].addDraw({ type: 'Polygon' })
    },
    addCircleDraw (type) {
      this.$refs['drawUtil-map'].addDraw({ type: 'Circle' })
    },
    addSquareDraw (type) {
      this.$refs['drawUtil-map'].addDraw({ type: 'Square' })
    },
    addBoxDraw (type) {
      this.$refs['drawUtil-map'].addDraw({ type: 'Box' })
    },
    editDraw () {
      this.$refs['drawUtil-map'].editDraw()
    },
    deleteDraw () {
      this.$refs['drawUtil-map'].deleteDraw()
    },
    deleteAllDraw () {
      this.$refs['drawUtil-map'].deleteAllDraw()
    },
    removeDrawUtil () {
      this.$refs['drawUtil-map'].removeDrawUtil()
    },
    getDrawLayerGeoJson () {
      const geoJson = this.$refs['drawUtil-map'].getDrawLayerGeoJson()
      console.log(geoJson)
    },
    initMapClick () {
      this.$router.push({ name: 'home_map_initMap' })
    }
  }
}
</script>

<style lang="scss" scoped>
  .home_map_componentMap {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
    .search {
      width: 100%;
      display: flex;
      align-items: center;
      .search-key {
        flex: 0 0 70px;
        text-align: center;
      }
      .search-input {
        flex: 0 0 200px;
      }
    }
  }
</style>

<style lang="scss">
  .home_map_componentMap {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
    .chosenClass {
      top: 20px;
      bottom: auto !important;
    }
    .cloudClass {
      color: Green !important;
    }
    .radarClass {
      color: Gray !important;
    }
  }
</style>
